@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");

/* Python input() styling */
.python-input-container {
  display: flex;
  gap: 5px;
  margin: 10px 0;
  align-items: center;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 5px;
  border-left: 4px solid #3775a8;
}

.python-input-container span {
  color: #333;
  font-size: 14px;
  font-family: "Fira Code", Helvetica, sans-serif;
  white-space: nowrap;
  margin-right: 5px;
}

.python-input-field {
  flex: 1;
  padding: 8px 10px;
  border: 2px solid #3775a8;
  border-radius: 4px;
  font-family: "Fira Code", monospace;
  font-size: 14px;
  background-color: white;
  transition: border-color 0.3s ease;
}

.python-input-field:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
}

.python-input-submit {
  padding: 8px 20px;
  background-color: #3775a8;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: sans-serif;
}

.python-input-submit:hover {
  background-color: #2c5f8a;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.python-input-submit:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Input echo styling */
.code-output .python-input-echo {
  color: #2196F3;
  font-weight: bold;
  font-family: "Fira Code", monospace;
}

.custom-btn-container {
  position: fixed;
  top: 120px;
  left: 100px;
  z-index: 100;
  width: 73px;
  height: 60px;
}

.custom-btn-container .btn {
  height: 60px;
  width: 73px;
  border-radius: 50%;
}

.custom-btn-container .full-container {
  position: absolute;
  transform: translateY(-50px);
  display: none;
  transition: all 500ms;
}

.custom-btn-container.active .full-container {
  transform: translateY(0px);
  display: block;
}

.active-div {
  display: inline-block;
}

.active-input {
  border: none;
  outline: none;
  border-bottom: 1px solid black;
  width: 170px;
  font-family: "Fira Code", Helvetica, sans-serif;
  font-size: 14px;
}

.active-input:focus {
  border: none;
  outline: none;
  border-bottom: 1px solid black;
}

.active-input:active {
  border: none;
  outline: none;
}

.off {
  display: none;
}

.code-editor-containerheader {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 14px;
  background-color: gray;
  color: #fff;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  margin-bottom: -20px;
}

.logo-img {
  width: 50px;
  height: 50px;
  margin-top: -5px;
  z-index: 1;
}

.code-editor-container {
  /*position: absolute;*/
  height: 600px;
  width: 100%;
  /* padding: 20px; */
  box-sizing: border-box;
}

.input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.container {
  border: 2.5px solid #616a6b;
  width: 100%;
  height: 50%;
  padding: 10px;
  background-color: #bdd7ee;
  /* margin-left: -20px; */
  box-sizing: border-box;
}

.code-editor-wrapper {
  display: flex;
  width: 100%;
  height: 82%;
  margin-bottom: 10px !important;
  border: 1px solid #616a6b;
  background-color: #1b2334;
  box-sizing: border-box;
}

.line-numbers {
  /*background-color: #0d1117;*/
  color: #6e7681;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: right;
  font-family: "Fira Code", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 22px;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #30363d;
  min-width: 20px;
  max-width: 50px;
  white-space: pre;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.line-numbers::-webkit-scrollbar {
  display: none;
}

.yourcode:focus {
    outline: none;
}

.yourcode {
  font-family: "Fira Code", Helvetica, sans-serif;
  resize: none;
  flex: 1;
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
  border: none;
  font-size: 14px;
  background-color: #1b2334;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 5px;
  color: white;
  line-height: 22px;
  overflow-y: auto;
  overflow-x: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* Add this at the end of your style.css file */
.yourcode::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.yourcode::-webkit-scrollbar-track {
  background: #0d1117;
}

.yourcode::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 5px;
}

.yourcode::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

.code-output img {
  max-width: 100%; /* Ensure images are responsive */
  height: auto; /* Maintain aspect ratio */
  display: block;
  margin: 10px 0; /* Add some margin */
}

.yourcode-fb {
  font-family: "Fira Code", Helvetica, sans-serif;
  resize: none;
  width: 323px;
  height: 200px;
  border: 1px solid #616a6b;
  font-size: 14px;
  background-color: #1b2334;
  color: white;
  overflow: auto;
  box-sizing: border-box;
}

.function-button {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition-duration: 0.4s;
  /* padding: 10px; */
  cursor: pointer;
  background-color: #3775a8;
  color: white;
  border: none;
  border-radius: 7px;
  width: 100px;
  line-height: unset !important;
  margin: unset !important;
  font-family: sans-serif !important;
}

.blank {
  background-color: red;
}

.blank:focus {
  border: none;
  outline: none;
}

.function-button-fb {
  margin-top: -30px;
}

.output-container {
  border-right: 2.5px solid #616a6b;
  /* border-top: 2.5px solid #616a6b; */
  border-bottom: 2.5px solid #616a6b;
  border-left: 2.5px solid #616a6b;

  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 50%;
  /* padding: 10px; */
  background-color: white;
  /* margin-right: -60px; */
  box-sizing: border-box;
}

.pre-container {
  height: 100%;
  width: 100%;
  /* margin-top: -24px; */
  /* margin-left: -10px; */
  box-sizing: border-box;
}

.code-output {
  font-size: 14px;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 5px;
  box-sizing: border-box;
  margin: 0;
  line-height: 22px;
}

#canvas {
  position: relative;
  top: 20px;
  /* right: -358px; */
  height: 300px !important;
  width: 100% !important;
  overflow: auto;
  margin: 0;
  padding: 0;
  border: 2.5px solid #616a6b;
  border-top: 0;
  /* border-top-style: none; */
  transform-origin: center top;
  box-sizing: border-box;
  z-index: 2;
  /* background: lavender; */
}

div > canvas {
  /* width: 400px !important;
    height: 400px !important; */
}

div > canvas:nth-child(1) {
  /* aspect-ratio: 270 / 270; */
}

div > canvas:nth-child(2) {
  /* aspect-ratio: 270 / 270; */
}

/* CODEX STYLES */
#codex-activate:hover {
  cursor: pointer;
}

#codex-app {
  width: 100%;
  height: 50%;
  background: #343541;

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  position: relative;
  bottom: 50%;
  /* left: 360px; */
  font-size: 12px;
}

.codex-show {
  display: flex;
}

#chat_container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: scroll;

  display: flex;
  flex-direction: column;
  gap: 10px;

  -ms-overflow-style: none;
  scrollbar-width: none;

  padding-bottom: 20px;
  scroll-behavior: smooth;
  font-size: 12px;
}

/* hides scrollbar */
#chat_container::-webkit-scrollbar {
  display: none;
}

.codex-wrapper {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.ai {
  background: #40414f;
}

.codex-chat {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.codex-profile {
  width: 36px;
  height: 36px;
  border-radius: 5px;

  background: #5436da;

  display: flex;
  justify-content: center;
  align-items: center;
}

.ai .codex-profile {
  background: #10a37f;
}

.codex-profile img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.codex-message {
  flex: 1;

  color: #dcdcdc;
  font-size: 16px;

  max-width: 100%;
  overflow-x: scroll;

  /*
  * white space refers to any spaces, tabs, or newline characters that are used to format the CSS code
  * specifies how white space within an element should be handled. It is similar to the "pre" value, which tells the browser to treat all white space as significant and to preserve it exactly as it appears in the source code.
  * The pre-wrap value allows the browser to wrap long lines of text onto multiple lines if necessary.
  * The default value for the white-space property in CSS is "normal". This tells the browser to collapse multiple white space characters into a single space, and to wrap text onto multiple lines as needed to fit within its container.
  */
  white-space: pre-wrap;

  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* hides scrollbar */
.codex-message::-webkit-scrollbar {
  display: none;
}

.codex-form {
  width: 100%;
  /* max-width: 1280px; */
  padding: 10px;
  box-sizing: border-box;
  background: #40414f;

  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: -1px;
}

.codex-form img {
  width: 30px;
  height: 30px;
}

#codex-prompt {
  width: 100%;

  color: #fff;
  font-size: 18px;

  padding: 10px;
  background: transparent;
  border-radius: 5px;
  border: none;
  outline: none;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  resize: none;
}

#codex-prompt::-webkit-scrollbar {
  /* WebKit */
  width: 0;
  height: 0;
}

.codex-button {
  outline: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  height: 50px;
  width: 50px;
}

.codex-widget-container {
  position: relative;
  height: 600px;
  top: 20px;
}

/* TEXT HIGHLIGHT EFFECT */
#share-snippet {
  width: 110px;
  height: 45px;
  background-color: rgb(98, 134, 211);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 99;
}

.icon {
  padding: 0;
  margin: 0;
  transform: scale(1.3);
}

#twitter-share-btn {
  width: 4.5rem;
  height: 2.2rem;
  font-size: 1.25rem;
  color: #56b8f5;
  background-color: #fed244;
  cursor: pointer;
  border: 2px solid #5188b5;
  /* border-radius: 50%; */
  position: absolute;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
  transition:
    color 0.2s,
    background-color 0.2s ease-in-out;
}

.utility-btns {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  gap: 5px;
}

#mobile-codex-options {
  /* width: 4.6rem; */
  height: 2.2rem;
  font-size: 1.25rem;
  color: #56b8f5;
  background-color: #fed244;
  /* cursor: pointer; */
  border: 2px solid #5188b5;
  /* border-radius: 50%; */
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 10;
  transition:
    color 0.2s,
    background-color 0.2s ease-in-out;
  margin-left: 2px;
  box-sizing: unset !important;
  gap: 5px;
  padding: 0px 5px;
}

.seperater {
  height: 100%;
  width: 1px;
  background-color: #5188b5;
  /* margin: 0px 2px; */
}

#mobile-codex-options div {
  cursor: pointer;
}

#mobile-codex-options i {
  pointer-events: none;
  color: #5188b5;
}

/* #twitter-share-btn:hover {
  color: #fff;
  background-color: #56b8f5;
  } */

#twitter-share-btn i {
  pointer-events: none;
  color: #5188b5;
}

.btnEntrance {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}

@keyframes btnEntrance {
  /* zoomIn */
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 1;
  }
}

/* DRAWER STYLING */
.hide {
  display: none;
}

.turtle-drawer-btn {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition-duration: 0.4s;
  padding: 10px;
  cursor: pointer;
  background-color: #3775a8;
  color: white;
  border: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  width: 40px;
  position: relative;
  top: 3px;
  left: 140px;
}

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-top: -5px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  position: relative;
  top: 3px;
}

.dropdown-open {
  animation: opene 0.3s ease-in-out forwards;
}

@keyframes opene {
  0% {
    transform: scaleY(0);
    max-height: 0px;
    /* margin-top: 0px; */
  }
  100% {
    transform: scaleY(1);
    max-height: 435px;
    /* margin-top: -25px; */
  }
}

.dropdown-close {
  animation: close 0.3s ease-in-out forwards;
}

@keyframes close {
  0% {
    transform: scaleY(1);
    max-height: 435px;
    /* margin-top: -25px; */
  }
  100% {
    transform: scaleY(0);
    max-height: 0px;
    /* margin-top: -25px; */
  }
}

.containerOpen {
  animation: containerOpen 0.3s ease-in-out forwards;
}

@keyframes containerOpen {
  0% {
    height: 341px;
  }
  100% {
    height: 614px;
  }
}

.containerClose {
  animation: containerClose 0.3s ease-in-out forwards;
}

@keyframes containerClose {
  0% {
    height: 614px;
  }
  100% {
    height: 341px;
  }
}

.containerOpenMobile {
  animation: containerOpenMobile 0.3s ease-in-out forwards;
}

@keyframes containerOpenMobile {
  0% {
    height: 620px;
  }
  100% {
    height: 900px !important;
  }
}

.containerCloseMobile {
  animation: containerCloseMobile 0.3s ease-in-out forwards;
}

@keyframes containerCloseMobile {
  0% {
    height: 900px;
  }
  100% {
    height: 620px;
  }
}

.button-open {
  animation: buttonOpen 0.3s ease-in-out forwards;
}

@keyframes buttonOpen {
  0% {
    /* transform: scaleY(0); */
    top: 3px;
  }
  100% {
    top: 275px;
  }
}

.button-close {
  animation: buttonClose 0.3s ease-in-out forwards;
}

@keyframes buttonClose {
  0% {
    /* transform: scaleY(0); */
    top: 275px;
  }
  100% {
    top: 3px;
  }
}

/* PYSCRIPT */
py-terminal {
  display: none;
}

#lineplot {
  width: 1000px;
  height: 1000px;
}

.DS_button {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
}

.checkbox {
  display: none;
}

.switch {
  position: relative;
  top: -1px;
  width: 40px;
  height: 40px;
  background-color: rgb(99, 99, 99);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* gap: 5px; */
  font-size: 12px;
  font-weight: 700;
  color: rgb(37, 37, 37);
  border: 2px solid rgb(126, 126, 126);
  box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
}

#checkbox1 + .switch {
  position: relative;
  /* top: -2px */
}

#checkbox2 + .switch {
  position: relative;
  /* width: 38.5px;
    height: 38.5px;
    top: -2px */
}

.checkbox2-container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative !important;
  /* left: 250px; */
}

.checkbox1-container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative !important;
  /* right: 10px; */
}

.turtle > .svg {
  width: 70%;
  height: 70%;
}

.svg {
  position: relative;
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg path {
  fill: rgb(37, 37, 37);
}

.checkbox:checked + .switch .svg {
  filter: drop-shadow(0px 0px 3px rgb(222, 151, 255));
}

.checkbox:checked + .switch .svg path {
  fill: rgb(255, 255, 255);
}

.checkbox:checked + .switch {
  box-shadow:
    0px 0px 1px rgb(222, 151, 255) inset,
    0px 0px 2px rgb(222, 151, 255) inset,
    0px 0px 10px rgb(222, 151, 255) inset,
    0px 0px 40px rgb(222, 151, 255),
    0px 0px 100px rgb(222, 151, 255),
    0px 0px 5px rgb(222, 151, 255);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(152, 107, 172);
  color: rgb(255, 255, 255);
}

#checkbox2:checked + .switch {
  box-shadow:
    0px 0px 1px rgb(128, 255, 116) inset,
    0px 0px 2px rgb(128, 255, 116) inset,
    0px 0px 10px rgb(128, 255, 116) inset,
    0px 0px 40px rgb(128, 255, 116),
    0px 0px 100px rgb(128, 255, 116),
    0px 0px 5px rgb(128, 255, 116);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(5, 201, 15);
  color: rgb(255, 255, 255);
}

#checkbox2:checked + .switch > i {
  /* box-shadow: 0px 0px 0px rgb(128, 255, 116) inset,
    0px 0px 2px rgb(128, 255, 116) inset,
    0px 0px 10px rgb(128, 255, 116) inset,
    0px 0px 40px rgb(128, 255, 116),
    0px 0px 100px rgb(128, 255, 116),
    0px 0px 5px rgb(128, 255, 116); */
  background: transparent;
  color: rgb(255, 255, 255);
}

.switch > i {
  transform: translate(-50%, -35%) scale(1.8) !important;
  position: absolute;
  top: 45%;
  left: 50%;
}

.switch.turtle > i {
  transform: translate(-50%, -45%) scale(1.8) !important;
  position: absolute;
  top: 50%;
  left: 50%;
}

.switch.ai > i {
  transform: translate(-50%, -45%) scale(1.8) !important;
  position: absolute;
  top: 45%;
  left: 50%;
}

.cb-container {
  height: 45px;
  width: 45px;
}

.lightrope {
  /* text-align: center; */
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1000000000000;
  margin-top: -25px;
  padding: 0;
  left: 8px;
  pointer-events: none;
  width: 720px;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 50%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.lightrope li:nth-child(2n + 1) {
  background: aqua;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
  animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}
.lightrope li:nth-child(4n + 2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
  animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}
.lightrope li:nth-child(3n + 1) {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%,
  100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%,
  100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%,
  100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}
@keyframes flash-3 {
  0%,
  100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}

.checkboxes-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

py-config {
  visibility: hidden;
}

.py-fullscreen {
  height: 30px !important;
  width: 30px !important;
  padding: 0 !important;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  border-width: 3px !important;
  border-style: outset !important;
  border-color: black !important;
  border-image: initial !important;

  position: absolute;
  top: 305px;
  right: 7px;
}

.py-minimize {
  height: 30px !important;
  width: 30px !important;
  padding: 0 !important;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  border-width: 3px !important;
  border-style: outset !important;
  border-color: black !important;
  border-image: initial !important;

  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
}

.py-fullscreen:hover,
.py-minimize:hover {
  background: #e5e5e5 !important;
  color: black !important;
}

.fa-up-right-and-down-left-from-center,
.fa-down-left-and-up-right-to-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.loader-container {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.loader {
  width: 35px;
  height: 35px;
  border: 3px solid #5188b5;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}